<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.slider - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

.form > tbody > tr > th { font-weight: normal; padding-right: 10px !important; padding-bottom: 10px !important; text-align: right; }
.form > tbody > tr > td { padding-bottom: 10px !important; }

</style>

<script>

$(document).ready(function () {

	$('.ex1').ajp$slider({
		value: 0.5,
		onchange: function (val, $slider) {
			$('#ex1').text(val.toFixed(2))
		}
	})

	$('.ex2').ajp$slider({
		min: 100,
		max: 500,
		value: 250,
		onchange: function (val, $slider) {
			$('#ex2').text(val.toFixed(2))
		}
	})

	$('.ex3').ajp$slider({
		orientation: 'vertical',
		onchange: function (val, $slider) {
			
		}
	})

	$('.ex4').ajp$slider({
		orientation: 'horizontal',
		onchange: function (val, $slider) {
			
		}
	})

})

</script>

</head>

<body>


	<table class="layout form">
		<tr>
			<th>Slider #1: minimal value is 0, maximal is 1, initial is 0.5, current is <span id="ex1"></span>:</th>
			<td><div class="ex1 ajp-slider"></div></td>
		</tr>
		<tr>
			<th>Slider #2: minimal value is 100, maximal is 500, initial is 250, current is <span id="ex2"></span>:</th>
			<td><div class="ex2 ajp-slider"></div></td>
		</tr>
	</table>
	<hr/>
	<div class="ex3 ajp-vsb"></div>
	<hr/>
	<div class="ex4 ajp-hsb"></div>

</body>